<template>
  <div class="header">
    <div class="title" v-if="!!title">
      <span>{{ title }}</span>
    </div>
    <div class="search">
      <ElInput v-model="searchForm.text" size="small" clearable placeholder="请输入关键字搜索">
        <template #suffix>
          <ElIcon><Icon icon="search" /></ElIcon>
        </template>
      </ElInput>
    </div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts" name="TreeHeader">
import { ElInput, ElIcon } from "element-plus";
import { Icon } from "@/components/Icon";
defineProps({
  title: {
    type: String
  },
  searchForm: {
    type: Object
  }
});
</script>
<style scoped lang="scss">
.header {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  line-height: 24px;
  .title {
    max-width: 40%;
    padding-right: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search {
    flex: 1;
  }
}
</style>
